<template>
  <div class="tab-content">
    <div class="tab-content-container">
      <template v-if="tabIds.length">
          <TabContentItem v-for="tabId in tabIds" :tabId="tabId" :isActived="tabId === activeTabId" :default-tab-component="defaultTabComponent" />
      </template>
      <div v-else class="tab-content-placeholder-monkey"></div>
    </div>
  </div>
</template>

<script>
  // import TabContentItem from './tab-content-item.vue'
  import TabContentItem from './tab-content-item.js'

  export default {
    components: {
      TabContentItem
    },
    props: ['tabIds', 'tabGroupId', 'defaultTabComponent'],
    computed: {
      activeTabId: function () {
        return this.$store.state.tab.tabGroups[this.tabGroupId].activeTabId
      }
    }
  }
</script>
